<style lang="less">
@import "blackList.less";
</style>
<template>
  <div class="search">
    <Row>
      <i-col>
        <Card>
          <Row style="margin-top: 1%;">
          </Row>
          
          <div>
            <Row  >
              <Tabs type="card" @on-click="clickType"  >
              <TabPane  label="合作商">合作商黑名单管理</TabPane>
              <TabPane  label="挂靠单位">挂靠单位黑名单管理</TabPane>
              <TabPane  label="见证人">见证人黑名单管理</TabPane>
              <TabPane  label="开票方">开票方黑名单管理</TabPane>
              <TabPane  label="车商">车商黑名单管理</TabPane>
            </Tabs>
              <Form ref="searchForm" :model="searchForm" inline :label-width="110" class="search-form">
                <Row class="operation" v-if="searchForm.blacklistType=='01'">
                  <i-col span="10">
                    <Form-item label="合作商名称" prop="blackName" style="margin-left: 40%">
                      <Input type="text" v-model="searchForm.blackName" clearable placeholder="请输入合作商名称"
                        style="width: 200px" />
                    </Form-item>
                  </i-col>
                  <i-col span="10">
                    <Form-item label="统一社会信用代码" prop="idCode" style="margin-left: 40%">
                      <Input type="text" v-model="searchForm.idCode" clearable placeholder="见证人身份证号码"
                        style="width: 200px" />
                    </Form-item>
                  </i-col>
                </Row>

                <Row class="operation" v-if="searchForm.blacklistType=='02'">
                  <i-col span="10">
                    <Form-item label="挂靠/运营公司名称" prop="blackName" style="margin-left: 40%" :label-width="112">
                      <Input type="text" v-model="searchForm.blackName" clearable placeholder="请输入"
                        style="width: 200px" />
                    </Form-item>
                  </i-col>
                  <i-col span="10">
                    <Form-item label="统一社会信用代码" prop="idCode" style="margin-left: 40%">
                      <Input type="text" v-model="searchForm.idCode" clearable placeholder="统一社会信用代码"
                        style="width: 200px" />
                    </Form-item>
                  </i-col>
                </Row>

                <Row class="operation" v-if="searchForm.blacklistType=='03'">
                  <i-col span="10">
                    <Form-item label="见证人姓名" prop="blackName" style="margin-left: 40%">
                      <Input type="text" v-model="searchForm.blackName" clearable placeholder="请输入见证人姓名"
                        style="width: 200px" />
                    </Form-item>
                  </i-col>
                  <i-col span="10">
                    <Form-item label="见证人身份证号码" prop="idCode" style="margin-left: 40%">
                      <Input type="text" v-model="searchForm.idCode" clearable placeholder="见证人身份证号码"
                        style="width: 200px" />
                    </Form-item>
                  </i-col>
                </Row>

                <Row class="operation" v-if="searchForm.blacklistType=='04'">
                  <i-col span="10">
                    <Form-item label="开票方名称" prop="blackName" style="margin-left: 40%">
                      <Input type="text" v-model="searchForm.blackName" clearable placeholder="请输入开票方名称"
                        style="width: 200px" />
                    </Form-item>
                  </i-col>
                  <i-col span="10">
                    <Form-item label="纳税人识别号" prop="idCode" style="margin-left: 40%">
                      <Input type="text" v-model="searchForm.idCode" clearable placeholder="请输入纳税人识别号"
                        style="width: 200px" />
                    </Form-item>
                  </i-col>
                </Row>

                <Row class="operation" v-if="searchForm.blacklistType=='05'">
                  <i-col span="8">
                    <Form-item label="车商名称" prop="blackName">
                      <Input type="text" v-model="searchForm.blackName" clearable placeholder="请输入车商名称"
                        style="width: 200px" />
                    </Form-item>
                  </i-col>
                  <i-col span="8">
                    <Form-item label="统一社会信用代码" prop="idCode">
                      <Input type="text" v-model="searchForm.idCode" clearable placeholder="统一社会信用代码"
                        style="width: 200px" />
                    </Form-item>
                  </i-col>

                  <i-col span="8">
                    <Form-item label="车商类型" prop="carDealers">
                      <Select v-model="searchForm.carDealers" placeholder="请选择" clearable style="width: 200px">
                        <Option value="01">乘用车</Option>
                        <Option value="02">商用车</Option>
                      </Select>
                    </Form-item>
                  </i-col>
                </Row>

                <Row class="operation" style="text-align: center">
                  <Form-item style="margin-left:-35px;" class="br">
                    <Button @click="handleSearch" type="primary" icon="ios-search">查询</Button>
                    <Button @click="handleReset" icon="md-redo">重置</Button>
                  </Form-item>
                </Row>
              </Form>
            </Row>
          </div>
          <Row class="operation" style="text-align: left">
            <Button v-has="'button_black_add'"  @click="add" type="primary" icon="md-add">新增申请</Button>
          </Row>
          <!-- 这个是合作商的 -->
          <Row>
            <Table :loading="loading" border :columns="columns" :data="data" sortable="custom"
              @on-selection-change="showSelect" ref="table">
              <template slot-scope="{ row }" slot="carDealers">
                <div v-if="row.carDealers == '01'">
                  普通车商
                </div>
                <div v-if="row.carDealers == '02'">
                  直营车商
                </div>
              </template>
              <template slot-scope="{ row, }" slot="blackName">
                <span style="color: blue;" @click="see(row)">{{row.blackName}}</span>
              </template>
              <template slot-scope="{ row }" slot="action">
                <Button v-has="'button_black_relieve'"  type="error" size="small" @click="stopUse(row)">解除黑名单</Button>

              </template>
            </Table>
          </Row>

          <Row type="flex" justify="end" class="page">
            <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
              @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small"
              show-total show-elevator show-sizer></Page>
          </Row>
        </Card>
      </i-col>
    </Row>

    <Modal :title="modalTitle" v-model="userModalVisible" :mask-closable='false' :width="500" :styles="{top: '90px'}">
      <Form ref="userForm" :model="userForm" :label-width="80" :rules="userFormValidate" style="margin-top: 20px">
        <FormItem label="解除原因" prop="relieveReason">
          <Input v-model="userForm.relieveReason" autocomplete="off" type="textarea" :rows="4" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancelUser">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="submitUser">提交</Button>
      </div>
    </Modal>

  </div>
</template>

<script>
import {
  getBlackList,
  removeBlacklist
} from "@/projects/afs-channel/api/black/black";

export default {
  name: "black-list",
  components: {},
  data() {
    const validateMobile = (rule, value, callback) => {
      var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!reg.test(value)) {
        callback(new Error("手机号格式错误"));
      } else {
        callback();
      }
    };
    return {
      loading: true,

      operationLoading: false,
      importLoading: true,
      loadingExport: true,
      drop: false,
      dropDownIcon: "ios-arrow-down",
      selectCount: 0,
      selectList: [],
      viewImage: false,

      stopId: null, // 定义一个解除单个时候的id

      searchForm: {
        blacklistType: "01",
        blackName: null, //名称
        idCode: null, //证件号码
        carDealers: null, // 车商类型。仅在车商才可以用
        pageNumber:1,
        pageSize:10
        
      },

      hisSearchForm: {
        blacklistType: "01",
        blackName: null, //名称
        idCode: null, //证件号码
        carDealers: null, // 车商类型。仅在车商才可以用
        pageNumber:1,
        pageSize:10
      },



      userModalVisible: false,
      modalTitle: "解除黑名单",
      submitLoading: false,

      // 默认
      columns: [],
      list1: [
        {
          type: "selection",
          minWidth: 60,
          maxWidth: 60,
          align: "center",
          fixed: "left"
        },
        {
          title: "序号",
          type: "index",
          minWidth: 100,
          align: "center",
          fixed: "left"
        },
        {
          title: "合作商名称",
          key: "blackName",
          minWidth: 100,
          align: "center",
          fixed: "left",
          ellipsis: true,
          slot: "blackName"
        },
        {
          title: "统一社会信用代码",
          key: "idCode",
          minWidth: 100,
          align: "center"
        },
        {
          title: "加入黑名单时间",
          key: "blackDate",
          minWidth: 160,
          align: "center"
        },
        {
          title: "加入黑名单原因",
          key: "blacklistReason",
          minWidth: 120,
          align: "center"
        },
        {
          title: "操作",
          key: "action",
          minWidth: 100,
          align: "center",
          fixed: "right",
          slot: "action"
        }
      ],

      // 设置挂靠单位的列表结构
      list2: [
        {
          type: "selection",
          minWidth: 60,
          maxWidth: 60,
          align: "center",
          fixed: "left"
        },
        {
          title: "序号",
          type: "index",
          minWidth: 100,
          align: "center",
          fixed: "left"
        },
        {
          title: "挂靠/运营公司名称",
          key: "blackName",
          minWidth: 100,
          align: "center",
          fixed: "left",
          ellipsis: true,
          slot: "blackName"
        },
        {
          title: "统一社会信用代码",
          key: "idCode",
          minWidth: 100,
          align: "center"
        },
        {
          title: "加入黑名单时间",
          key: "blackDate",
          minWidth: 160,
          align: "center"
        },
        {
          title: "加入黑名单原因",
          key: "blacklistReason",
          minWidth: 120,
          align: "center"
        },
        {
          title: "操作",
          key: "action",
          minWidth: 100,
          align: "center",
          fixed: "right",
          slot: "action"
        }
      ],

      // 见证人列表数据
      list3: [
        {
          type: "selection",
          minWidth: 60,
          maxWidth: 60,
          align: "center",
          fixed: "left"
        },
        {
          title: "序号",
          type: "index",
          minWidth: 100,
          align: "center",
          fixed: "left"
        },
        {
          title: "见证人姓名",
          key: "blackName",
          minWidth: 100,
          align: "center",
          fixed: "left",
          ellipsis: true,
          slot: "blackName"
        },
        {
          title: "身份证号码",
          key: "idCode",
          minWidth: 100,
          align: "center"
        },
        {
          title: "加入黑名单时间",
          key: "blackDate",
          minWidth: 160,
          align: "center"
        },
        {
          title: "加入黑名单原因",
          key: "blacklistReason",
          minWidth: 120,
          align: "center"
        },
        {
          title: "操作",
          key: "action",
          minWidth: 100,
          align: "center",
          fixed: "right",
          slot: "action"
        }
      ],

      // 开票方数据列表
      list4: [
        {
          type: "selection",
          minWidth: 60,
          maxWidth: 60,
          align: "center",
          fixed: "left"
        },
        {
          title: "序号",
          type: "index",
          minWidth: 100,
          align: "center",
          fixed: "left"
        },
        {
          title: "开票方名称",
          key: "blackName",
          minWidth: 100,
          align: "center",
          fixed: "left",
          ellipsis: true,
          slot: "blackName"
        },
        {
          title: "纳税人识别号",
          key: "idCode",
          minWidth: 100,
          align: "center"
        },
        {
          title: "加入黑名单时间",
          key: "blackDate",
          minWidth: 160,
          align: "center"
        },
        {
          title: "加入黑名单原因",
          key: "blacklistReason",
          minWidth: 120,
          align: "center"
        },
        {
          title: "操作",
          key: "action",
          minWidth: 100,
          align: "center",
          fixed: "right",
          slot: "action"
        }
      ],

      // 车商列表数据
      list5: [
        {
          title: "序号",
          type: "index",
          minWidth: 100,
          align: "center",
          fixed: "left"
        },
        {
          title: "车商名称",
          key: "blackName",
          minWidth: 100,
          align: "center",
          fixed: "left",
          ellipsis: true,
          slot: "blackName"
        },
        {
          title: "车商类型",
          key: "carDealers",
          minWidth: 100,
          align: "center",
          slot: "carDealers"
        },
        {
          title: "统一社会信用代码",
          key: "idCode",
          minWidth: 100,
          align: "center"
        },
        {
          title: "加入黑名单时间",
          key: "blackDate",
          minWidth: 160,
          align: "center"
        },
        {
          title: "加入黑名单原因",
          key: "blacklistReason",
          minWidth: 120,
          align: "center"
        },
        {
          title: "操作",
          key: "action",
          minWidth: 100,
          align: "center",
          fixed: "right",
          slot: "action"
        }
      ],

      data: [],
      total: 0,
      // 停用的表单
      userForm: {
        relieveReason: null //停用原因
      },
      userFormValidate: {
        relieveReason: [
          { required: true, message: "请输入原因", trigger: "blur" }
        ]
      }
    };
  },
  watch: {
    $route(to, from) {
      if (
        from.path.indexOf("black-add"+"01") > -1 ||
        from.path.indexOf("black-add"+"02") > -1 ||
        from.path.indexOf("black-add"+"03") > -1 ||
        from.path.indexOf("black-add"+"04") > -1 ||
        from.path.indexOf("black-add"+"05") > -1 ||
        from.path.indexOf("black-edit") > -1 ||
        from.path.indexOf("black-examine") > -1
      ) {
        this.handleSearch();
      }
    }
  },
  methods: {
    init() {
      this.getBlackList();
    },
    // 改变一页多少个
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.hisSearchForm.pageNumber = v;
      // this.getBlackList();
      this.getHisBlackList();
      this.clearSelectAll();
    },
    // 一页多少个
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.hisSearchForm.pageSize = v;
      // this.getBlackList();
      this.getHisBlackList();
      this.clearSelectAll();
    },
    // 查找数据列表
    getBlackList() {
      // 多条件查询列表
      this.loading = true;
      if(this.searchForm.blackName!=null&&this.searchForm.blackName!=undefined&&this.searchForm.blackName!=""){
        this.searchForm.blackName=this.searchForm.blackName.replace(/\s*/g,"");
      }
      if(this.searchForm.idCode!=null&&this.searchForm.idCode!=undefined&&this.searchForm.idCode!=""){
        this.searchForm.idCode=this.searchForm.idCode.replace(/\s*/g,"");
      }
      getBlackList(this.searchForm).then(res => {
        this.loading = false;
        if (res.code === "0000") {
          this.data = res.data.records;
          this.total = res.data.total;
        }
      });
    },

    // 根据历史条件查找数据列表
    getHisBlackList() {
      // 多条件查询列表
      this.loading = true;
      if(this.hisSearchForm.blackName!=null&&this.hisSearchForm.blackName!=undefined&&this.hisSearchForm.blackName!=""){
        this.hisSearchForm.blackName=this.hisSearchForm.blackName.replace(/\s*/g,"");
      }
      if(this.hisSearchForm.idCode!=null&&this.hisSearchForm.idCode!=undefined&&this.hisSearchForm.idCode!=""){
        this.hisSearchForm.idCode=this.hisSearchForm.idCode.replace(/\s*/g,"");
      }
      getBlackList(this.hisSearchForm).then(res => {
        this.loading = false;
        if (res.code === "0000") {
          this.data = res.data.records;
          this.total = res.data.total;
        }
      });
    },
    //查询按钮操作
    handleSearch() {
      this.searchForm.pageNumber = 1;
      
      // 历史搜索条件
      this.hisSearchForm.blacklistType=this.searchForm.blacklistType;
      this.hisSearchForm.blackName =this.searchForm.blackName;
      this.hisSearchForm.idCode=this.searchForm.idCode;
      this.hisSearchForm.carDealers=this.searchForm.carDealers;
      this.getBlackList();
    },
    // 点击重置
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.searchForm.pageNumber = 1;


      this.searchForm.blackName = null;
      this.searchForm.idCode = null;
      this.searchForm.carDealers = null;

      // 历史搜索条件
      this.hisSearchForm.blacklistType=this.searchForm.blacklistType;
      this.hisSearchForm.blackName =this.searchForm.blackName;
      this.hisSearchForm.idCode=this.searchForm.idCode;
      this.hisSearchForm.carDealers=this.searchForm.carDealers;

      this.getBlackList();
    },

    // 跳转新增页面
    add() {
      let params = {
        type: 1,
        blacklistType:this.searchForm.blacklistType
      };
      let name="";
      if(this.searchForm.blacklistType=="01"){
        name="合作商"
      }else if(this.searchForm.blacklistType=="02"){
        name="挂靠单位"
      }else if(this.searchForm.blacklistType=="03"){
        name="见证人"
      }else if(this.searchForm.blacklistType=="04"){
        name="开票方"
      }else if(this.searchForm.blacklistType=="05"){
        name="车商"
      }
      this.afs.newTab(
        this,
        "projects/afs-channel/pages/black/black-add-edit/blackAddEdit",
        "黑名单添加:"+name,
        "ios-add",
        params,
        "black-add"+this.searchForm.blacklistType,
        [],
        true
      );
    },
    // 跳转 查看审核
    see(v) {
      console.log(v);
      // let params={
      //     v:v,
      //     type:2
      // };
      // this.$router.push({
      //         path:'witnessAddEdit',
      //         query: params,
      //     })
    },

    showSelect(e) {
      this.selectList = e;
      this.selectCount = e.length;
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false);
    },

    // 申请解除黑名单
    stopUse(v) {
      this.userForm.relieveReason=null;
      if (v.examineStatus == "02") {
        this.$Message.warning("已申请无需重复！");
        return;
      }
      this.stopId = v.id;
      this.userModalVisible = true;
    },
    // 关闭弹窗
    cancelUser() {
      this.userModalVisible = false;
      this.userForm.relieveReason = null;
      this.stopId = null;
    },

    // 切换类型
    clickType(type) {
      console.log(type)
      if (type == 0) {
        this.searchForm.blacklistType = "01";
        this.columns = this.list1;
      }
      if (type == 1) {
         this.searchForm.blacklistType = "02";
        this.columns = this.list2;
      }
      if (type == 2) {
         this.searchForm.blacklistType = "03";
        this.columns = this.list3;
      }
      if (type == 3) {
         this.searchForm.blacklistType = "04";
        this.columns = this.list4;
      }
      if (type == 4) {
         this.searchForm.blacklistType = "05";
        this.columns = this.list5;
      }
      this.handleReset();
    },
    // 确定提交
    submitUser() {
      if (
        this.userForm.relieveReason == null ||
        this.userForm.relieveReason == "" ||
        this.userForm.relieveReason == undefined
      ) {
        this.$Message.warning("请输入原因！");
        return;
      }
      if (
        this.stopId == null ||
        this.stopId == "" ||
        this.stopId == undefined
      ) {
        this.$Message.warning("请选择要申请的用户！");
        return;
      }

      let obj = {
        id: this.stopId,
        relieveReason: this.userForm.relieveReason
      };
      removeBlacklist(obj).then(res => {
        this.operationLoading = false;
        if (res.code === "0000") {
          this.userModalVisible = false;
          this.$Message.success("申请成功！");
          this.userForm.relieveReason = null;
          this.clearSelectAll();
          this.getBlackList();
        }
      });
    }
  },
  mounted() {
    this.columns = this.list1;
    this.init();
    this.handleReset();
  }
};
</script>
